<script setup lang='ts'>
import { 
    onMounted,
    ref, 
    watch} from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { Edit, Key, Delete, RefreshRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';

const route = useRoute();
const dialogEditInfo = ref(false)
const dialogVideoEditInfo = ref(false)
const dialogRoomEditInfo = ref(false)



onMounted(()=>{
    // 跳转获取
    const hash = route.hash.slice(1);  
    console.log(hash) 
    
    
    if(hash!='')
    {
        activeName.value=hash
    }
  
})
// 监听路由变化
watch(() => route.hash ,(newHash, oldHash)=> {
    activeName.value=route.hash.slice(1)
    console.log(newHash,oldHash)
  // 在这里执行你的逻辑
});
// 导航栏内容切换
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const movies = ref([
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈'

    },
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }

])

</script>


<template>

    <div class="userinfo">
        <div class="leftinfo">
            <el-avatar :size="112" src="/touxiang.jpg" />
            <div style="    width: 66%;">
                <h2>西柚西柚西</h2>
                <el-row>
                    <el-col :span="8">
                        <el-text class="mx-1" type="info">ID:2574088230</el-text></el-col>
                    <el-col :span="8">
                        <el-tag type="info">哇哈哈哈学院</el-tag></el-col>
                </el-row>



            </div>
        </div>
        <el-button @click="dialogEditInfo = true">编辑信息</el-button>


    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="我的视频" name="first" id="first">
            <!-- 视频管理-->
            <div class="videoList" v-for="(movie, index) in movies" :key="index">

                <el-card shadow="hover">
                    <el-image :src="movie.image" style="    width: 150px;border-radius: 4px;
    height: 200px;"></el-image>
                    <div class="movie-info">
                        <div class="info-title">{{ movie.title }}</div>
                        <div class="info-des">{{ movie.description }}</div>
                        <div class="info-time">2024年02月24日 14:00</div>
                        <div class="info-bottom">
                            <div style="display: flex;" class="edit-botoom">
                                <div @click="dialogVideoEditInfo = true">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                    <span>修改描述与封面</span>
                                </div>
                                <div><el-icon>
                                        <Key />
                                    </el-icon>
                                    <span>设置权限</span>
                                </div>
                                <div>
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span> 删除视频</span>
                                </div>
                            </div>


                        </div>
                    </div>
                </el-card>

            </div>
        </el-tab-pane>
        <el-tab-pane label="我的房间" name="second" id="second">
            <!-- 房间管理-->
            <div class="videoList" v-for="(movie, index) in movies" :key="index">

                <el-card shadow="hover">
                    <el-image :src="movie.image" style="    width: 150px;border-radius: 4px;
height: 200px;"></el-image>
                    <div class="movie-info">
                        <div class="info-title">{{ movie.title }}</div>
                        <div class="info-des">当前人数:9人</div>
                        <div class="info-time">2024年02月24日 14:00</div>
                        <div class="info-bottom">
                            <div style="display: flex;" class="edit-botoom">
                                <div @click="dialogRoomEditInfo = true">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                    <span>修改房间信息</span>
                                </div>

                                <div>
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span> 删除房间</span>
                                </div>
                            </div>


                        </div>
                    </div>
                </el-card>

            </div>
        </el-tab-pane>
        <el-tab-pane label="新建房间" name="third" id="third" style="display: flex;
    justify-content: center;">
            <!-- 创建房间-->
            <div class="info-dialog" style="
          width: 1000px;
    height: 400px;
    margin-top: 42px;
        /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
                <el-form class="info-form">
                    <h2>创建房间</h2>


                    <el-form-item>
                        <span>房间权限</span>

                        <el-radio-group>
                            <el-radio :value="3">公开的</el-radio>
                            <el-radio :value="6">私密的</el-radio>

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <span>房间名称</span>

                        <el-input maxlength="10" show-word-limit type="text" />
                    </el-form-item>



                    <el-form-item> <el-button class="save">创建房间</el-button>
                    </el-form-item>



                </el-form>


            </div>


        </el-tab-pane>

    </el-tabs>

    <!-- 弹框登录部分 -->
    <el-dialog v-model="dialogEditInfo" width="500" class="info-dialog" style="
          background: rgba(255, 255, 255, 0.3); /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
        <el-form class="info-form">
            <h2>编辑资料</h2>
            <div><el-avatar :size="112" src="/touxiang.jpg" /></div>


            <el-form-item>
                <span>用户名</span>

                <el-input maxlength="10" show-word-limit type="text" />
            </el-form-item>
            <el-form-item>
                <span>简介</span>

                <el-input maxlength="10" placeholder="Please input" show-word-limit type="text" />
            </el-form-item>

            <div> <el-button class="save">保存</el-button>
                <el-button class="cancel">取消</el-button>
            </div>



        </el-form>


    </el-dialog>
    <!-- 弹框修改视频内容部分 -->
    <el-dialog v-model="dialogVideoEditInfo" width="500" class="info-dialog" style="
          background: rgba(255, 255, 255, 0.3); /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
        <el-form class="info-form">
            <h2>修改视频内容与封面</h2>



            <el-form-item>
                <span>标题</span>

                <el-input maxlength="10" show-word-limit type="text" />
            </el-form-item>
            <el-form-item>
                <span>视频描述</span>

                <el-input maxlength="100" :rows="4" placeholder="请输入描述信息" show-word-limit type="textarea" />
            </el-form-item>
            <el-form-item>
                <span>设置封面</span>
                <div style="display: flex;">
                    <el-image src="/public/touxiang.jpg" fit="cover"
                        style="width: 96px;height: 128px;border-radius: 5px;"></el-image>

                    <el-button :icon="RefreshRight" class="cancel"
                        style="margin-left: 20px;margin-top: 10px;">替换</el-button>
                </div>

            </el-form-item>
            <div> <el-button class="save">保存</el-button>
                <el-button class="cancel">取消</el-button>
            </div>



        </el-form>


    </el-dialog>

    <!-- 弹框修改房间部分 -->
    <el-dialog v-model="dialogRoomEditInfo" width="500" class="info-dialog" style="
          background: rgba(255, 255, 255, 0.3); /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
        <el-form class="info-form">
            <h2>修改房间信息</h2>



            <el-form-item>
                <span>房间名称</span>

                <el-input maxlength="10" show-word-limit type="text" />
            </el-form-item>
            <el-form-item>
                <span>房间视频</span>

                <el-input maxlength="10" show-word-limit type="text" />
            </el-form-item>
            <el-form-item>
                <span>房间权限</span>

                <el-radio-group>
                    <el-radio :value="3">公开的</el-radio>
                    <el-radio :value="6">私密的</el-radio>

                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <span>设置封面</span>
                <div style="display: flex;">
                    <el-image src="/public/touxiang.jpg" fit="cover"
                        style="width: 96px;height: 128px;border-radius: 5px;"></el-image>

                    <el-button :icon="RefreshRight" class="cancel"
                        style="margin-left: 20px;margin-top: 10px;">替换</el-button>
                </div>

            </el-form-item>
            <div> <el-button class="save">保存</el-button>
                <el-button class="cancel">取消</el-button>
            </div>



        </el-form>


    </el-dialog>



</template>


<style lang='scss' scoped>
.userinfo {
    display: flex;
    justify-content: space-between;
    align-items: end;

}

.leftinfo {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;

}

.el-button {
    border: 1px solid rgba(255, 255, 255, .04);

    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    height: 33px;
    border-radius: 12px;
    color: white;

}

h2 {
    color: rgb(253, 253, 253);

}


.info-dialog .info-form {
    display: flex;
    align-items: center;
    color: aliceblue;
    flex-direction: column;

    .el-input {
        height: 45px;
    }
}

.el-form-item {
    width: 80%;
}

::v-deep .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: start;

}

::v-deep .info-dialog,
.info-dialog .info-form .el-input__wrapper {
    background-color: #3e3b3b;
    color: #555;
}

// 导航栏
::v-deep .el-tabs__item.is-active {
    color: #fe2c55;
}

::v-deep .el-tabs__item {
    color: white;
}

::v-deep .el-tabs__item:hover {
    color: #4670b8;
}

// 视频列表
.el-card {
    padding: 16px;
    margin: 10px;
    border: 0;
    background-color: #242424;
    transition: background-color .15s ease-out;


}

.el-card:hover {
    background-color: rgba(107, 109, 107, 0.3);

    border: 0px;
}

::v-deep.el-card .el-card__body {
    display: flex;
    padding: 0px;
}

// 卡片内信息
.movie-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    color: aliceblue;
}

.info-time {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    // color: rgba(22, 24, 35, .5);
}

.info-title {
    font-size: 14px;

    margin-bottom: 10px;
}

.info-bottom {
    margin-top: auto;
    opacity: 0;
    transition: all .15s ease-in;
    color: rgb(179, 183, 197);
    display: flex;
}

.el-card :hover .info-bottom {

    visibility: visible;
    opacity: 1;

}

.edit-botoom div {
    padding-right: 12px;
    margin-right: 20px;
    display: flex;
    font-weight: bold;
    align-items: center;
    cursor: pointer;

}

.edit-botoom div:last-child {
    color: #FE2C55;
}

// 房间权限
.el-radio {
    color: aliceblue;
}
</style>